<template>
    <div class="singer-album">
        <div class="album-slide">
            <div class="singer-img">
                <img :src="foods.pic">
            </div>
            <ul class="info">
<!--                <li v-if="foods.sex==0||foods.sex==1">{{foods.sex}}</li>-->
                <li>菜名：{{foods.name}}</li>
                <li>配料表：{{foods.ingredientList}}</li>
                <li>好处：{{foods.benefit}}</li>
            </ul>
        </div>


        <div class="album-content">
            <div class="intro">
                <h2>{{singer.name}}</h2>
                <span>{{singer.introduction}}</span>
            </div>


            <div id="menu">
              <table class="album-info">
                <tr style="color: #8c939d">
                <th>菜名</th>
                <th>图片</th>
                <th>价格</th>
                <th>配料表</th>
                <th>数量</th>
                <th>操作</th>
                </tr>
<!--                <hr class="hr-dashed2">-->


                <tr style="color: #8c939d">
                <td>{{ foods.name}}</td>
                <td><img style="height: 30px;width: 40px" :src="foods.pic"></td>
                <td>{{foods.price}}</td>
                <td>{{foods.ingredientList }}</td>
                <td>
                  <el-select style="width: 60px" v-model="num"  >
                                          <el-option value="1">1份</el-option>
                                          <el-option value="2">2份</el-option>
                                          <el-option value="3">3份</el-option>
                                          <el-option value="4">4份</el-option>
                                          <el-option value="5">5份</el-option>
                                          <el-option value="6">6份</el-option>
                                          <el-option value="7">7份</el-option>
                                        </el-select>
                </td>
                <td>
                <el-button @click="goBuy(foods.id)">购买</el-button>
                </td>
                  </tr>
              </table>
            </div>
        </div>
    </div>
</template>
<script>
import {mixin} from '../mixins';
import {mapGetters} from 'vuex';
import {songOfSingerId} from '../api/index';
import AlbumContent from "../components/AlbumContent";
import {TheInformationOfADishByTheDishId} from "../api/food";
import AlbumContentThree from "../components/AlbumContentThree";
import {generateAnOrder} from "../api/order";
export default {
    name: 'singer-album',
    mixins: [mixin],
    components:{
      AlbumContentThree,
        AlbumContent
    },
    data(){
        return {
            singerId: '',       //前面传来的歌手id
            singer: {},         //当前歌手信息
            foods:[],
             num:1,
             res:[],
            login:"",
        }
    },
    computed:{
        ...mapGetters([
            'listOfSongs',      //当前播放列表
            'tempList',         //当前歌手对象
            'loginIn',          //用户是否已登录
            'userId',           //当前登录用户id
        ])
    },
    created(){
        this.foods =  JSON.parse(window.sessionStorage.getItem('shop'));
        this.singerId = this.$route.params.id;
         console.log(this.foods.name);
         this.getfMation();
         this.login = JSON.parse(window.sessionStorage.getItem('loginIn'));

    },
    methods:{
      goBuy(id){
        if (this.login == true) {
          generateAnOrder(this.num, id).then(res => {
            if (res.data.code == 200) {
              this.$message.success("购买成功")
            } else {
              this.$message.error(res.data.message)
            }
          }).catch(error => {
            this.$message.error("系统结算业务维护中！！！")
          })
        }else {
          this.$message.error("未登录")
        }
      },
      //获取当前食物信息
      getfMation(){
        TheInformationOfADishByTheDishId(this.foods.id).then(res=>{
          if (res.data.code == 200){
            this.res = res.data.obj;
          }
        })
      },
    }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/singer-album.scss';
@import '../assets/css/my-music.scss';
.one{
  size: 20px;
}
//
//#menu{
//  background-color: $color-white;
//  border-radius: $border-radius-songlist;
//  padding: 20px 40px;
//  min-width: 700px;
//  font-size: 20px;
//
//}
//#menu ul {
//  width: 100%;
//  padding-bottom: 50px;
//}
//#menu li {
//    padding-left: 130px;
//    display: inline;
//    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
//    height: 50px;
//    line-height: 50px;
//    text-indent: 20px;
//    cursor: pointer;
//  }
#table{
  float: left;
  width: 90%;
  background: #ccc;
  border-collapse: collapse;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;

  border-top:solid 1px #2aa3ef;
}
th{
  height: 25px;
  font-size: 20px;
  padding-left: 120px;

}
td{
  height: 25px;
  font-size: 20px;
  padding-left: 120px ;
  padding-top: 10px;

}
//.hr-dashed2 {
//  border: 0;
//  border-top: 2px dashed #a2a9b6;
//  margin-left: 100px;
//}
</style>
